{% if tabs | length > 0 %}
    {# TODO: fix variable class #}
    <div class="row {% if classes %}{{ classes }}{% else %}spacing{% endif %}"{% if id %} id="{{ id }}"{% endif %}>
        <ul class="nav {% if anchor_id == 'overview' %}nav-pills{% else %}nav-tabs{% endif %}" role="tablist">
            {% for tab in tabs %}
                <li role="presentation"{% if loop.first %} class="active"{% endif %}>
                    <a href="#{{ anchor_id }}-{{ tab.anchor_id }}"
                       aria-controls="{{ anchor_id }}-{{ tab.anchor_id }}"
                       role="tab"
                       data-toggle="tab">{{ tab.name | fmt_badge }}</a>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content"{% if anchor_id == 'overview' %} style="padding-top: 10px;" {% endif %}>
            {% for tab in tabs %}
                <div role="tabpanel" class="tab-pane col-sm-12{% if loop.first %} active{% endif %}" id="{{ anchor_id }}-{{ tab.anchor_id }}">
                    {{ tab.render() }}
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}